<template>
	<view>
		<view class="block">
			<view class="hint-txt">2022年8月</view>
			<view class="hint-txt-one">共15笔支出,<span>￥378.12</span></view>
			<view class="hint-txt-two">
				<view class="left-txt">共3笔收入,<span>￥1000.00</span></view>
				<view class="right-txt">结余<span>￥621.83</span></view>
			</view>
		</view>

		<view class="tab-block">
			<view class="tab-item" @click="tabClick(-1)" :class="indexCurrent==-1?'check-item':'none-item'">
				支出
				<view class="item-border" v-if="indexCurrent==-1"></view>
			</view>
			<view class="tab-item" @click="tabClick(1)" :class="indexCurrent==1?'check-item':'none-item'">
				收入
				<view class="item-border" v-if="indexCurrent==1"></view>
			</view>
		</view>

		<view class="block" style="height: 400rpx">
			<qiun-data-charts type="column" :opts="optsTwo" 
			:chartData="chartTwoData" 
			 :ontouch="true"
			:canvas2d="true"
				canvasId="nskYHAOqdasoKVNaAHAErfYTXJfPDUnl" />
		</view>

		<view class="block">
			<qiun-data-charts type="pie" :opts="optsOne" :chartData="chartOneData" :canvas2d="true"
				canvasId="kuiZyRVvGABIkLgXEsqTcNAnPeSNGBsE" />
		</view>


		<view class="block">
			<view class="lst-item">
				<view class="item-option">
					<view class="icon"></view>
					<view class="txt">衣服</view>
					<view class="number-s">12.93%</view>
					<view class="price">
						￥3000.00
					</view>
					<uni-icons type="right" size="16" color='#000'></uni-icons>
				</view>
				<view class="item-option">
					<view class="icon"></view>
					<view class="txt">衣服</view>
					<view class="number-s">12.93%</view>
					<view class="price">
						￥3000.00
					</view>
					<uni-icons type="right" size="16" color='#000'></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexCurrent: -1,
				chartOneData: {},
				chartTwoData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				optsOne: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				optsTwo: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					 touchMoveLimit: 24,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						          itemCount: 4
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData();
			this.getServerTwoData();
		},
		methods: {
			tabClick(index) {
				this.indexCurrent = index
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "一班",
								"value": 50
							}, {
								"name": "二班",
								"value": 30
							}, {
								"name": "三班",
								"value": 20
							}, {
								"name": "四班",
								"value": 18,
								"labelText": "四班:18人"
							}, {
								"name": "五班",
								"value": 8
							}]
						}]
					};
					this.chartOneData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerTwoData() {
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "目标值",
								data: [35, 36, 31, 33, 13, 34, 36, 31, 33, 13, 34]
							},
						]
					};
					this.chartTwoData = JSON.parse(JSON.stringify(res));
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	.block {
		background: #fff;
		border-radius: 8rpx;
		margin: 24rpx;
		padding: 24rpx;

		.hint-txt {
			font-weight: bold;
			font-size: 34rpx;
		}

		.hint-txt-one {
			margin-top: 24rpx;
		}

		.hint-txt-two {
			margin-top: 24rpx;
			display: flex;
			align-items: center;

			.left-txt {
				flex: auto;
			}

			.right-txt {
				flex: none;
			}
		}

		span {
			font-weight: bold;
		}

		.lst-item {

			.item-option {
				display: flex;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #EFEFEF;

				.icon {
					border: 1rpx solid red;
					width: 34rpx;
					height: 34rpx;
				}

				.txt {
					margin-left: 14rpx;
					font-size: 28rpx;
				}

				.number-s {
					flex: auto;
					text-align: center;
				}

				.price {
					margin-right: 24rpx;
				}
			}
		}
	}

	.tab-block {
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		height: 104rpx;
		border-bottom: 1rpx solid #F4F5FC;
		background: #fff;

		.tab-item {
			width: 33%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.item-border {
				position: absolute;
				width: 36rpx;
				height: 6rpx;
				background: #0089CF;
				border-radius: 440rpx 440rpx 440rpx 440rpx;
				left: 100rpx;
				top: 60rpx;
				right: 0;
				display: flex;
				align-items: center;
			}
		}

		.none-item {
			font-size: 28rpx;
			color: #333333;
		}

		.check-item {
			font-size: 30rpx;
			font-weight: normal;
			color: #000000;
		}
	}
</style>